<!DOCTYPE html>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
.easyui-dialog>form>div {
  margin: 5px 0
}
</style>
</head>
<body>
  <div>
    <table id="datagrid">
      <thead>
        <tr>
          <th data-options="field: '', checkbox: true"></th>
          <th data-options="field: 'identifier', sortable: true, order: 'asc', align: 'right'">编号</th>
          <th data-options="field: 'userName', halign: 'center', width: 200">用户名</th>
          <th data-options="field: 'email', fixed: true">邮件地址</th>
          <th data-options="field: 'registrationTime'">注册时间</th>
        </tr>
      </thead>
    </table>
    <div class="easyui-dialog" style="width: 350px; height: 270px; text-align: center; padding: 25px 0;"
      data-options="buttons: '#buttons', closable: false, closed: true, title: '编辑', iconCls: 'icon-edit'">
      <form id="easyui-form">
        <div>
          <input class="easyui-textbox" name="identifier" style="width: 80%"
            data-options="label: '编号', readonly: true, required: true">
        </div>
        <div>
          <input class="easyui-textbox" name="userName" style="width: 80%" data-options="label: '用户名', required: true">
        </div>
        <div>
          <input class="easyui-textbox" name="email" style="width: 80%" data-options="label: '邮件地址', required: true">
        </div>
        <div>
          <input class="easyui-datebox" name="registrationTime" style="width: 80%"
            data-options="label: '注册时间', required: true" validType="validateDate">
        </div>
      </form>
    </div>
    <div id="buttons">
      <a onclick="saveFormData()" href="javascript:;" id="save" class="easyui-linkbutton" data-options="iconCls: 'icon-save'">
        保存
      </a>
      <a href="javascript:closeDialog()" class="easyui-linkbutton" data-options="iconCls: 'icon-no', plain: true">
        取消
      </a>
    </div>
  </div>
  <script type="text/javascript">
    function closeDialog() {
      $('.easyui-dialog').dialog('close');
    }
    function saveFormData() {
      var rowData;
      $("#easyui-form").form("submit", {
        url: null,
        onSubmit: function (param) {
          rowData = new Object(param);
          var arr = $(".textbox-value");
          for (var e of arr) {
            var name = $(e).attr("name");
            //如果参数名称是主键字段名称，那么跳过本次循环，避免主键值发生更改
            if (Object.is(name, "identifier")) {
              continue;
            }
            var val = $(e).val();
            console.log(name + ":" + val);
            param[name] = val;
          }
          rowData = param;
          console.log(param);
          //不提交数据
          return false;
        },
        /* success: function (data) {} */
      });
      var row = $("#datagrid").datagrid("getSelected");
      var tableRowString = ".datagrid-row.datagrid-row-checked.datagrid-row-selected";
      for (var key in rowData) {
        row[key] = rowData[key];
        var tableCellString = tableRowString + ">td[field=" + key + "]";
        console.log(tableCellString);
        var innerText = $(tableCellString + ">div").text();
        console.log("text:" + innerText);
        console.log("row[" + key + "]:" + row[key]);
        $(tableCellString + ">div").text(row[key]);
        console.log($(tableCellString + ">div").text());
      }
      closeDialog();
    }
    $(function () {
      $.extend($.fn.validatebox.defaults.rules, {
        validateDate: {
          validator: function (value) {
            var state = /^(\d{3}|\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/.test(value);
            if (state) {
              $("#save").linkbutton("enable");
            } else {
              $("#save").linkbutton("disable");
            }
            return state;
          }
        }
      })
      $("#datagrid").datagrid({
        url : 'data.json',
        //顶部工具栏的DataGrid面板。可能的值：一个数组，每个工具属性都和linkbutton一样；选择器指定的工具栏
        toolbar : [ {
          iconCls : 'icon-edit',
          text : '编辑',
          //点链接，触发click事件的处理函数。参数是可选的
          handler : function (event) {
            //返回所有被选中的行，当没有记录被选中的时候将返回一个空数组
            var rows = $("#datagrid").datagrid("getSelections");
            //如果数组的长度不等于1
            if (rows.length != 1) {
              //取消选择所有当前页中所有的行
              $("#datagrid").datagrid("unselectAll");
              return false;
            }
            //获取第一个被选中的行
            var row = $("#datagrid").datagrid("getSelected");
            //如果存在被选中的单元行，那么打开指定对话框
            if (row != null) {
              //构建对象，也可以构建映射（Map）
              var data = new Object(); // new Map();
              for (var key in row) {
                data[key] = row[key]; // data.set(key, row[key]);
              }
              //打开面板。如果参数forceOpen的值为true，打开面板时将忽略onBeforeOpen回调函数
              $(".easyui-dialog").dialog("open");
              //读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录
              //以下两条语句的作用相同
              //$("#easyui-form").form("load", row);
              $("#easyui-form").form("load", data);
            }
          }
        }, '-', {
          text : '添加',
          iconCls : 'icon-add',
          handler : function () {
            console.log("添加")
          }
        }, '-', {
          text : '移除',
          iconCls : 'icon-remove',
          handler : function () {
            var container = $("#datagrid");
            var rows = container.datagrid("getSelections");
            console.log("长度为" + rows.length);
            var arr = new Array(rows.length);
            for (var row of rows) {
              var index = container.datagrid("getRowIndex", row);
              arr.push(index);
              console.log(index);
            }
            console.log(arr);
            arr.sort(function compare(a, b) {
              if (a < b) { // 按某种排序标准进行比较, a小于b
                return 1;
              }
              if (a > b) {
                return -1;
              }
              // a一定等于b
              return 0;
            });
            console.log(arr);
            console.log("数组的长度：" + arr.length);
            var indexes = "";
            for (var e of arr) {
              if (e != null) {
                indexes = indexes + e + ",";
                console.log("行索引的值：" + e);
                container.datagrid("deleteRow", e);
              }
            }
            indexes = indexes.substring(0, indexes.length - 1);
            console.log(indexes);
          }
        } ],
        //添加一个当前指定样式到面板
        style : {
          margin : 'auto'
        },
        //在请求远程数据的时候发送额外的参数。默认值为{}
        //这个方法会被datagrid的load方法取代：$(this).datagrid('load', {})
        queryParams : {
          //name: 'value',
        },
        //返回过滤后的数据；返回的标准数据对象须包含total和rows属性，否则只展示一页的数据。唯一参数表示源数据，比如json对象
        loadFilter : function (data) {
          console.log(data);
          //返回过滤后的数据
          return data.records;
        },
        //一次性排序的列的名称
        sortName : 'identifier',
        //列的一次性排序顺序，只能是'asc'或'desc'
        sortOrder : 'asc',
        //自动展开/收缩列的大小以适应网格的宽度，默认值为false
        //fitColumns: true,
        //是否从服务器对数据进行排序，默认值为true
        remoteSort : false,
        //是否显示斑马线效果，默认值为false
        striped : true,
        //是否在同一行中显示数据，设置为true可以提高加载性能。默认值为true
        //nowrap: false,
        //从远程站点加载数据的时候显示提示消息，默认值为“Processing, please wait …”
        loadMsg : '正在处理，请稍候...',
        //是否只允许选择一行，默认值为false
        //singleSelect : true,
        width : 616,
        //是否在底部显示分页工具栏，默认值为false
        pagination : true,
        //标识字段
        idField : 'identifier',
        pageSize : 10,
        pageList : [ 10, 20, 30, 40 ],
        //显示一个行号列，默认值为false
        rownumbers : true,
      })
    })
  </script>
</body>
</html>